<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>iperm</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="images/favicon.ico">
    <link rel="stylesheet" href="lib/layui-v2.5.5/css/layui.css">
    <link rel="stylesheet" href="lib/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/layuimini.css?v=2.0.1">
    <link rel="stylesheet" href="css/public.css">
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style id="layuimini-bg-color"></style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

    <div class="layui-header header">
        <div class="layuimini-header-content">
            <a href="javascript:;" class="left-nav-tool pull-left">
                <i class="fa fa-outdent" data-fold="0"></i>
            </a>
            <ul class="layui-nav pull-left layuimini-header-menu layuimini-header-menu-left"></ul>
            <ul class="layui-nav pull-right layuimini-header-menu header-right-menu">
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="fa fa-phone"></i></a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="fa fa-envelope"></i><span class="layui-badge">0</span></a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="fa fa-calendar"></i><span
                            class="layui-badge layui-bg-orange">59</span></a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;" class="handle-menu-message"><i class="fa fa-bell-o"></i><span
                            class="layui-badge layui-bg-orange">59</span></a>
                </li>
                <li class="layui-nav-item no-more">
                    <a href="javascript:;"><i class="fa fa-plus"></i></a>
                    <dl class="layui-nav-child p-r">
                        <dd>
                            <a href="javascript:;" data-type="addTalent"><i class="fa fa-user mr-5"></i> 新增候选人</a>
                        </dd>
                        <dd>
                            <a href="javascript:;"><i class="fa fa-suitcase mr-5"></i> 新增项目</a>
                        </dd>
                        <dd>
                            <a href="javascript:;"><i class="fa fa-pencil-square-o mr-5"></i> 新增订单</a>
                        </dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;" data-type="quickSearch"><i class="fa fa-search"></i></a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">admin</a>
                    <dl class="layui-nav-child p-r">
                        <dd>
                            <a href="javascript:;" class="handle-menu-lan"><i
                                    class="layui-icon layui-icon-website mr-5"></i> 系统语言</a>
                        </dd>
                        <dd>
                            <a href="javascript:;" class="login-out"><i class="fa fa-sign-out mr-5"></i> 退出登录</a>
                        </dd>
                    </dl>
                </li>
            </ul>

        </div>
    </div>

    <!--初始化加载层-->
    <!--    <div class="layuimini-loader">-->
    <!--        <div class="layuimini-loader-inner"></div>-->
    <!--    </div>-->

    <div class="layui-body">

        <div class="layuimini-content-page">
        </div>

    </div>
</div>
<!-- 快速查询 -->
<div class="quick-search-panel panel-anim layui-hide" id="quickSearchPanel" v-show="show">
    <div class="quick-search-content">
        <div class="quick-search-input" @click.stop.prevent>
            <input type="text" class="layui-input" ref="searchInput" v-model="searchKey" @input="handleSearchInput"
                   placeholder="请输入名称或ID">
        </div>
        <div class="quick-search-result">
            <div class="result-head" @click.stop.prevent>
                <i class="fa fa-search color-blue mr-5"></i>
                <strong v-if="searchKey == ''">最近浏览记录</strong>
                <strong v-if="searchKey">搜索结果</strong>
            </div>
            <div class="result-list">
                <div class="result-msg color-gray" v-show="showResult" @click.stop.prevent>
                    <i class="layui-icon layui-icon-loading  layui-anim layui-anim-rotate layui-anim-loop"></i>
                </div>
                <div class="result-msg" v-if="!showResult && showMsg" @click.stop.prevent>未搜索到结果</div>
                <div v-show="!showResult">
                    <!-- 候选人 -->
                    <div class="result-item" v-if="searchTalent.length">
                        <div class="item-title" @click.stop.prevent>候选人</div>
                        <div class="item-body">
                            <ul>
                                <li v-for="item in searchTalent" :key="item.id">
                                    <a href="javascript:;" class="link-content" :layuimini-href="item.url"
                                       @click="hidePanel">
                                        <div class="title">
                                            <span>#{{item.id}}</span>
                                            <span v-html="highlightKeyword(item.title.name)"></span>
                                            <span>({{item.mobile}})</span>
                                        </div>
                                        <div class="content">
                                            <span :style="{color: item.company.color}">{{item.company.name}}</span> -
                                            <span>{{item.job}}</span>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 订单 -->
                    <div class="result-item" v-if="searchOrder.length">
                        <div class="item-title" @click.stop.prevent>订单</div>
                        <div class="item-body">
                            <ul>
                                <li v-for="item in searchOrder" :key="item.id">
                                    <a href="javascript:;" class="link-content" :layuimini-href="item.url"
                                       @click="hidePanel">
                                        <div class="title">
                                            <span>#{{item.id}}</span>
                                        </div>
                                        <div class="content">
                                            <span :style="{color: item.title.color}">{{item.title.name}}</span>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 客户 -->
                    <div class="result-item" v-if="searchClient.length">
                        <div class="item-title" @click.stop.prevent>客户</div>
                        <div class="item-body">
                            <ul>
                                <li v-for="item in searchClient" :key="item.id">
                                    <a href="javascript:;" class="link-content" :layuimini-href="item.url"
                                       @click="hidePanel">
                                        <div class="title">
                                            <span>#{{item.id}}</span>
                                        </div>
                                        <span :style="{color: item.title.color}">{{item.title.name}}</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 项目 -->
                    <div class="result-item" v-if="searchProject.length">
                        <div class="item-title" @click.stop.prevent>项目</div>
                        <div class="item-body">
                            <ul>
                                <li v-for="item in searchProject" :key="item.id">
                                    <a href="javascript:;" class="link-content" :layuimini-href="item.url"
                                       @click="hidePanel">
                                        <div class="title">
                                            <span>#{{item.id}}</span>
                                        </div>
                                        <span :style="{color: item.title.color}">{{item.title.name}}</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="lib/layui-v2.5.5/layui.js"></script>
<script src="lib/vue/vue.js"></script>
<script src="lib/lodash.min.js"></script>
<script src="js/lay-config.js?v=2.0.0"></script>
<script src="js/helper-tools.js"></script>
<script>
    layui.use(['jquery', 'layer', 'miniAdmin', 'utils', 'miniPage'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            miniAdmin = layui.miniAdmin,
            utils = layui.utils,
            miniPage = layui.miniPage;

        var options = {
            iniUrl: "api/init.json",    // 初始化接口
            clearUrl: "api/clear.json", // 缓存清理接口
            renderPageVersion: true,    // 初始化页面是否加版本号
            bgColorDefault: 0,          // 主题默认配置
            loadingTime: 0,             // 初始化加载时间
            pageAnim: true,             // 切换菜单动画
        };
        miniAdmin.render(options);
        utils.sideFold();


        var menuActive = {
            addTalent: function () {
                var content = miniPage.getHrefContent('page/talent/add.html');
                if (content) {
                    layer.open({
                        title: '编辑候选人',
                        type: 1,
                        shade: 0.2,
                        maxmin: true,
                        area: ['98%', '90%'],
                        content: content,
                        btn: ['确认', '取消'],
                        btnAlign: 'c',
                        yes: function (index, layero) {
                            window.talentDialogContent.handleSubmitBtnClick();
                        },
                        end: function () {
                            delete window.talentDialogContent;
                        }
                    });
                }
            }, // 新增候选人
            quickSearch: function () {
                $('.header-right-menu').hide();
                $('.quick-search-panel').removeClass('layui-hide');
                quickSearchPanel.showSearch();
            }, // 快速搜素
        };

        $('.layuimini-header-menu a[data-type]').on('click', function (e) {
            e.preventDefault();
            e.stopPropagation();
            var type = $(this).data('type');
            menuActive[type] ? menuActive[type].call(this) : '';
        });

        $('.login-out').on("click", function () {
            layer.msg('退出登录成功', function () {
                window.location = 'page/login.html';
                window.sessionStorage.setItem("session", "");
            });
        });

        // 消息提醒
        $(document).on("click", ".handle-menu-message", function () {
            var content = miniPage.getHrefContent('page/message.html');
            if (content) {
                layer.open({
                    title: '消息提醒',
                    type: 1,
                    shade: 0.2,
                    area: ['98%', '90%'],
                    content: content,
                    success: function (layero, index) {

                    }
                });
            }
        });

        $(document).on('click', '.handle-menu-lan', function () {
            var content = miniPage.getHrefContent('page/common/language.html');
            if (content) {
                layer.open({
                    title: '系统语言',
                    area: ['580px', '300px'],
                    type: 1,
                    shade: 0.2,
                    content: content,
                    btn: ['确定', '取消', '发送测试邮件'],
                    btnAlign: 'c',
                    success: function (layero, index) {
                        layero.find('.layui-layer-btn2').css({
                            'background': '#ff5722',
                            'color': '#fff',
                            'border-color': '#ff5722'
                        })
                    },
                    yes: function (index, layero) {
                        layero.find('[lay-filter="formSub"]').click();
                    },
                    btn3: function (index, layero) {
                        return false;
                    }
                });
            }
        });

        // 快速查询
        var quickSearchPanel = new Vue({
            el: '#quickSearchPanel',
            data: function () {
                return {
                    show: false,
                    resultFlag: true,
                    searchKey: '',
                    searchTalent: [], // 候选人
                    searchOrder: [], // 订单
                    searchClient: [], // 客户
                    searchProject: [], // 项目
                }
            },
            mounted: function () {
                var that = this;
                $('body').on('click', function () {
                    that.show = false;
                    that.resultFlag = true;
                    $('.header-right-menu').show();
                })
            },
            computed: {
                showResult: function () {
                    return this.resultFlag;
                },
                showMsg: function () {
                    return !this.searchTalent.length && !this.searchOrder.length && !this.searchClient.length && !this.searchProject.length;
                }
            },
            methods: {
                clearPanel: function () {
                    this.searchKey = '';
                    this.searchTalent = [];
                    this.searchOrder = [];
                    this.searchClient = [];
                    this.searchProject = [];
                },
                showSearch: function () {
                    var that = this;
                    that.show = true;
                    that.loadSearchData();
                    setTimeout(function () {
                        that.$refs.searchInput.focus();
                    }, 200)
                },
                loadSearchData: function () {
                    var that = this
                    setTimeout(function () {
                        utils.Ajax({
                            url: 'api/common/search.json',
                            dataType: 'json',
                            type: 'post',
                            data: {
                                key: that.searchKey
                            },
                            success: function (response) {
                                var data = response.data;

                                if (Array.isArray(data.talent)) {
                                    that.searchTalent = data.talent;
                                }
                                if (Array.isArray(data.order)) {
                                    that.searchOrder = data.order
                                }
                                if (Array.isArray(data.client)) {
                                    that.searchClient = data.client
                                }
                                if (Array.isArray(data.project)) {
                                    that.searchProject = data.project
                                }

                                that.resultFlag = false;
                            }
                        })
                    }, 0)
                },
                handleSearchInput: _.debounce(function () {
                    this.resultFlag = true;
                    this.loadSearchData();
                }, 600, {leading: true}),
                hidePanel: function () {
                    this.show = false;
                    this.resultFlag = true;
                    $('.header-right-menu').show();
                },
                // escapeRegExChars: function (value) {
                //     return value.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&");
                // },
                // highlightKeyword: function (content) {
                //     var searchKey = this.searchKey;
                //     if (!searchKey) {
                //         return content;
                //     }
                //     var pattern = '(' + this.escapeRegExChars(searchKey) + ')';
                //     return content
                //         .replace(new RegExp(pattern, 'gi'), '<strong>$1<\/strong>')
                //         .replace(/&/g, '&amp;')
                //         .replace(/</g, '&lt;')
                //         .replace(/>/g, '&gt;')
                //         .replace(/"/g, '&quot;')
                //         .replace(/&lt;(\/?strong)&gt;/g, '<$1>');
                // }
                highlightKeyword: function (content, color) {
                    var that = this;
                    var key = $.trim(that.searchKey);
                    var texts = content;
                    if (!color) {
                        color = '#ff5722';
                    }
                    if (key) {
                        var allVal = content.match(new RegExp(key, 'ig'));
                        if (allVal) {
                            for (var j = 0; j < allVal.length; j ++) {
                                texts = texts.replace(allVal[j], '[*' + j + '*]');
                            }
                            for (var i = 0; i < allVal.length; i ++) {
                                texts = texts.replace('[*' + i + '*]', '<font color='+ color +'>' + allVal[i] + '</font>');
                            }
                        }
                    }
                    return texts;
                }
                // isNotBlank : function(value) {
                //     //正则表达式用于判斷字符串是否全部由空格或换行符组成
                //     var reg = /^\s*$/;
                //     //返回值为true表示不是空字符串
                //     return (value != null && value != undefined && !reg.test(value))
                // },
                // highlightKeyword: function(content,keyword,color){
                //     if(this.isNotBlank(content) && this.isNotBlank(keyword)){
                //         if(!color){
                //             color = "red";
                //         }
                //         return content.replace(keyword,"<font color='"+color+"'>"+keyword+"</font>");
                //     }else{
                //         return content;
                //     }
                // }
            }
        })

    });
</script>
</body>
</html>
